<template>
	<!-- 订单卡片 -->
	<view class="sh-order-box  u-m-b-10 u-p-r-20">
		<view class="titleBox">
			<text class="leftTitle">我的订单</text>
			<view @click="toall">全部
				<u-icon class="left" name="arrow-right" color="#666" :fontSize="28"></u-icon>
			</view>
		</view>
		<view class="order-box u-flex">
			<view class="order-item u-flex-col " @tap="jump('/pages/order/list', { id: order.id })"
				v-for="order in orderNav" :key="order.id">
				<view class="u-flex-col item-box u-col-center">
					<image class="order-img" :src="order.img" mode=""></image>
					<text class="item-title">{{ order.title }}</text>
					<view class="badge" v-if="orderNum && orderNum[order.type]">{{ orderNum[order.type] }}</view>
				</view>
			</view>
			<!-- 			<view class="order-item u-flex-col " @tap="jump('/pages/order/after-sale/list')">
				<view class="u-flex-col item-box u-col-center">
					<image class="order-img" :src="$IMG_URL + '/imgs/user/tab55.png'" mode=""></image>
					<text class="item-title">退换货</text>
				</view>
			</view> -->
		</view>

		<!-- 		<view class="order-item u-flex-col all-order " @tap="jump('/pages/order/list', { type: 'all' })">
			<image class="cut-off--line" :src="$IMG_URL + '/imgs/user/cut_off_line.png'" mode=""></image>
			<view class="u-flex-col item-box u-col-center">
				<image class="order-img" :src="$IMG_URL + '/imgs/user/all_order.png'" mode="aspectFill"></image>
				<text class="item-title">全部订单</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	/**
	 * 订单中心卡片
	 *
	 */
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				orderNav: [
					// {
					// 	id: 1,
					// 	title: '待付款',
					// 	img: '/imgs/user/tab11.png',
					// 	type: 'nopay'
					// },
					{
						id: 1,
						title: '待发货',
						img: require('../../../static/images/newUser/nosend.png'),
						type: 'nosend'
					},
					{
						id: 2,
						title: '待收货',
						img: require('../../../static/images/newUser/noget.png'),
						type: 'noget'
					},
					{
						id: 3,
						title: '已完成',
						img: require('../../../static/images/newUser/finish.png'),
						type: 'finish'
					}
				]
			};
		},
		computed: {
			...mapState({
				orderNum: ({
					user
				}) => user.userData?.order_num,
				isLogin: ({
					user
				}) => user.isLogin
			})
		},
		methods: {
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			},
			toall() {
				this.jump('/pages/order/list', {
					id: ''
				})
			}
		}
	};
</script>

<style lang="scss">
	.badge {
		position: absolute;
		/* #ifndef APP-NVUE */
		display: inline-flex;
		/* #endif */
		justify-content: center;
		align-items: center;
		line-height: 24rpx;
		padding: 4rpx 10rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 9;
		background-color: $u-type-error;
		transform: scale(0.8);
		transform-origin: center center;
		left: 100rpx;
		top: -6rpx;
		white-space: nowrap;
	}

	// 订单卡片
	.sh-order-box {
		width: 720rpx;
		position: relative;
		top: -50rpx;
		left: 15rpx;
		height: 200rpx;
		background: #fff;
		border-radius: 20rpx;

		.titleBox {
			width: 720rpx;
			display: flex;
			padding: 20rpx 40rpx;
			justify-content: space-between;

			.leftTitle {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
			}

			view {
				color: #666;
			}
		}

		.order-box {
			flex: 4;
		}

		.all-order {
			position: relative;

			.cut-off--line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: (750rpx/5) - 15rpx;
				width: 30rpx;
				height: 136rpx;
			}
		}

		.order-item {
			flex: 1;
			.item-box {
				position: relative;
			}

			.order-img {
				width: 46rpx;
				height: 46rpx;
			}

			.item-title {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(153, 153, 153, 1);
				line-height: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
